<template>
    <div class="person">
        <h2>姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
        <button @click="nameChange">更改姓名</button>
        <button @click="ageChange">增加年龄</button>
        <button @click="showTel">显示电话</button>
    </div>
</template>
<script lang="ts">
    export default {
        name: 'person'
        // setup(){
            // return {
            //     name,
            //     age,
            //     nameChange,
            //     ageChange,
            //     showTel
            // }
        // }
    }
</script>

<script lang="ts" setup>
    import { ref } from 'vue'
    let name = ref('张三')
    let age = ref(18)
    let tel = '1888888888';

    function nameChange() {
        name.value = 'zhang-san'
        console.log(name.value)
    }

    function ageChange() {
        age.value += 1
        console.log(age.value)
    }

    function showTel() {
        alert(tel)
    }
</script>